<div id="subContainer" class="wrapper wrapper-content" xmlns:v-on="http://www.w3.org/1999/xhtml">
    <div class="ibox float-e-margins">
        <div class="ibox-content">
            <form class="form-horizontal m-t" id="signupForm">
                <div class="form-group">
                    <label class="col-sm-3 control-label">合作单位：</label>
                    <div class="col-sm-8">
                        <select id="company" name="company" class="form-control" type="text" v-model="args.company" v-on:change="changeCompany(args)">
                            <option v-for="item in companies" :value="item.name">{{item.name}}</option>
                        </select>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-3 control-label">出函银行：</label>
                    <div class="col-sm-8">
                        <select id="bankName" name="bankName" class="form-control" type="text" v-model="args.bankName">
                            <option v-for="item in banks" :value="item.name">{{item.name}}</option>
                        </select>
                    </div>
                </div>

                <div class="form-group">
                    <label class="col-sm-3 control-label">直开/转开：</label>
                    <div class="col-sm-8">
                        <select id="invoiceType" name="invoiceType" class="form-control" type="text" v-model="args.invoiceType">
                            <option v-for="item in invoiceTypies" :value="item">{{item}}</option>
                        </select>
                    </div>
                </div>


                <div class="form-group">
                    <label class="col-sm-3 control-label">保函类型：</label>
                    <div class="col-sm-8">
                        <select id="busType" name="busType" class="form-control" type="text" v-model="args.busType">
                            <option v-for="item in busTypies" :value="item.name">{{item.name}}</option>
                        </select>
                    </div>
                </div>

                <div class="form-group">
                    <label class="col-sm-3 control-label">客户名称：</label>
                    <div class="col-sm-8">
                        <input id="cusName" name="cusName" class="form-control" type="text" aria-required="true" aria-invalid="true" class="error" v-model="args.cusName">
                    </div>
                </div>

                <div class="form-group">
                    <label class="col-sm-3 control-label">信用代码：</label>
                    <div class="col-sm-8">
                        <input id="creditCode" name="creditCode" class="form-control" type="text" aria-required="true" aria-invalid="true" class="error" v-model="args.creditCode">
                    </div>
                </div>


                <div class="form-group">
                    <label class="col-sm-3 control-label">法人姓名：</label>
                    <div class="col-sm-8">
                        <input id="legalName" name="legalName" class="form-control" type="text" aria-required="true" aria-invalid="true" class="error" v-model="args.legalName">
                    </div>
                </div>

                <div class="form-group">
                    <label class="col-sm-3 control-label">法人职务：</label>
                    <div class="col-sm-8">
                        <input id="legalPosition" name="legalPosition" class="form-control" type="text" aria-required="true" aria-invalid="true" class="error" v-model="args.legalPosition">
                    </div>
                </div>

                <div class="form-group">
                    <label class="col-sm-3 control-label">联系方式：</label>
                    <div class="col-sm-8">
                        <input id="phone" name="phone" class="form-control" type="text" aria-required="true" aria-invalid="true" class="error" v-model="args.phone">
                    </div>
                </div>

                <div class="form-group">
                    <label class="col-sm-3 control-label">企业地址：</label>
                    <div class="col-sm-8">
                        <input id="companyAddress" name="companyAddress" class="form-control" type="text" aria-required="true" aria-invalid="true" class="error" v-model="args.companyAddress">
                    </div>
                </div>

                <div class="form-group">
                    <label class="col-sm-3 control-label">担保期限：</label>
                    <div class="col-sm-8">
                        <input id="guaranteeDate" name="guaranteeDate" class="form-control" type="text" aria-required="true" aria-invalid="true" class="error" v-model="args.guaranteeDate">
                    </div>
                </div>

                <div class="form-group">
                    <label class="col-sm-3 control-label">受益人：</label>
                    <div class="col-sm-8">
                        <input id="beneficiary" name="beneficiary" class="form-control" type="text" aria-required="true" aria-invalid="true" class="error" v-model="args.beneficiary">
                    </div>
                </div>

                <div class="form-group">
                    <label class="col-sm-3 control-label">担保金额：</label>
                    <div class="col-sm-8">
                        <input id="guaranteeAmount" name="guaranteeAmount" v-on:change="changeUpcase()" class="form-control" type="text" aria-required="true" aria-invalid="true" class="error" v-model="args.guaranteeAmount">
                    </div>
                </div>

                <div class="form-group">
                    <label class="col-sm-3 control-label">担保金额大写：</label>
                    <div class="col-sm-8">
                        <input id="guaranteeAmountUpcase"  name="guaranteeAmountUpcase" class="form-control" type="text" aria-required="true" aria-invalid="true" class="error" v-model="args.guaranteeAmountUpcase">
                    </div>
                </div>

                <div class="form-group">
                    <label class="col-sm-3 control-label">项目名称：</label>
                    <div class="col-sm-8">
                        <input id="projectName" name="projectName" class="form-control" type="text" aria-required="true" aria-invalid="true" class="error" v-model="args.projectName">
                    </div>
                </div>



                <div class="form-group">
                    <div class="col-sm-8 col-sm-offset-3">
                        <button type="button" class="btn btn-secondary" v-on:click="cancel()">取消</button>
                        <button type="button" class="btn btn-primary" v-on:click="save()">保存</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
<script src="/js/validateIsMain.js"></script>
<script>
    new Vue({
        el: '#subContainer',
        data: {
            applicationContextRootPath: '/',
            args: {
                company: '',
                bankName: '',
                busType: '',
                invoiceType: '',
                cusName: '',
                creditCode: '',
                legalName: '',
                legalPosition: '',
                phone: '',
                companyAddress: '',
                guaranteeDate: '',
                beneficiary: '',
                guaranteeAmount: '',
                guaranteeAmountUpcase: '',
                projectName: ''
            },
            invoiceTypies: ['直开', '转开'],
            companies: [],
            banks: [],
            busTypies: []
        },
        created: function () {
            this.loadCompany();
            this.loadBanks();
            this.loadBusTypies();
        },
        methods: {
            changeCompany(item) {
                console.log(item)
                for (let i = 0; i < this.companies.length; i++) {
                    let company = this.companies[i];
                    if(company.name == item.company) {
                        this.args.legalName = company.contacts;
                        this.args.phone = company.tel;
                    }
                }

            },
            loadBusTypies() {
                var that = this;
                AJAX.GET('/api/sysDictData/listByCode/BUS_TYPE', {}, function (resp) {
                    that.busTypies = resp.data;
                })
            },
            loadBanks() {
                var that = this;
                AJAX.GET('/api/sysDictData/listByCode/CH_BANK', {}, function (resp) {
                    that.banks = resp.data;
                })
            },
            loadCompany() {
                var that = this;
                console.log(12211221)
                AJAX.POST_JSON('/api/sysCompany/all', {}, function (resp) {
                    that.companies = resp.data;
                })
            },
            changeUpcase: function () {
                let m = this.args.guaranteeAmount;
                m = m.replace(/,/g, '');
                this.args.guaranteeAmountUpcase = this.convertToChineseCurrency(m);
            },
            cancel: function () {
                this.backToMain();
            },
            save: function () {
                if(!$("#signupForm").valid()){
                    return false;
                }
                var that = this;
                AJAX.POST_JSON('api/sign', this.args, function (resp) {
                    toastr.success(resp.msg);
                    that.backToMain();
                });
            },
            backToMain: function () {
                $.pjax({
                    url: mvm.applicationContextRootPath + 'pages/sign/index.html',
                    container: '.page-container'
                });
            },
            convertToChineseCurrency: function (num) {
                const fraction = ['角', '分'];
                const digit = [
                    '零', '壹', '贰', '叁', '肆',
                    '伍', '陆', '柒', '捌', '玖'
                ];
                const unit = [
                    ['元', '万', '亿'],
                    ['', '拾', '佰', '仟']
                ];
                let head = num < 0 ? '欠' : '';
                num = Math.abs(num);

                let s = '';
                for (let i = 0; i < fraction.length; i++) {
                    s += (digit[Math.floor(num * 10 * Math.pow(10, i)) % 10] + fraction[i]).replace(/零./, '');
                }
                s = s || '整';
                num = Math.floor(num);

                for (let i = 0; i < unit[0].length && num > 0; i++) {
                    let p = '';
                    for (let j = 0; j < unit[1].length && num > 0; j++) {
                        p = digit[num % 10] + unit[1][j] + p;
                        num = Math.floor(num / 10);
                    }
                    s = p.replace(/(零.)*零$/, '').replace(/^$/, '零') + unit[0][i] + s;
                }

                return head + s.replace(/(零.)*零元/, '元').replace(/(零.)+/g, '零').replace(/^整$/, '零元整');
            }
        }
    });

    $().ready(function () {
        const icon = "<i class='fa fa-times-circle'></i> ";
        $("#signupForm").validate({
            rules: {
                name: "required",
                code: "required",
                value: "required"
            },
            messages: {
                name: icon + "请输入选项名称",
                code: icon + "请输入选项编号",
                value: icon + "请输入选项内容"
            }
        });

        // propose username by combining first- and lastname
        $("#username").focus(function () {
            var firstname = $("#firstname").val();
            var lastname = $("#lastname").val();
            if (firstname && lastname && !this.value) {
                this.value = firstname + "." + lastname;
            }
        });
    });
</script>
